Documentation

Javascript 101

General

On Start Function

Syntax:

$scope.$on("$ionicView.afterEnter", function (event) {
  //Autostart function
});

Example:

$scope.$on("$ionicView.afterEnter", function (event) {
  $scope.view.wdg['label-1'].text = "View Loaded";
});

Timeout Function

If you want something to happen after some time passes. You can put your code within a timeout function.

A timeout function gets called after the milliseconds stated afterwards. If you want the function to fire after 1 second pass, set the milliseconds to 1000.

Syntax:

$timeout(function() {

}, 1000);

Example:

$timeout(function() {
  console.log("Using Javascript is really cool!");
}, 1000);

Offical AngularJS Documenation

Change Application Parameters

You're able to get and set the global parameters that you've defined in the application parameters pane.

Syntax:

$scope.app.params['parameterName'] = "";

Example:

$scope.app.params['nextButtonActive'] = true;

Widgets

Change Properties

You're able to change the widget properties via the following syntax. You need to define the Studio ID in the first brackets and seen in the example.

Syntax:

$scope.view.wdg['studioID']['propertyName'] = "";

Example:

$scope.view.wdg['model-1']['visible'] = true;

Call Widget Services

You can call services of widgets that support a specific event (see widget doc for more information) by built in API. Once called, it will fire that service.

Syntax:

twx.app.fn.triggerWidgetService(widgetId, serviceName);

Example:

twx.app.fn.triggerWidgetService('audio-1', 'play');

Trigger Widget Events

You can trigger events of widgets that support a specific event (see widget doc for more information) by built in API. Once called, it will emit that event.

Syntax:

twx.app.fn.triggerStudioEvent(widgetId, serviceName);

Example:

twx.app.fn.triggerStudioEvent('button-1', 'click');

Functions

You're able to add a Javascript function to any widget that has an event. For that you need to setup a Javascript function and match the name in the inspector. Below you'll find an example with a button click event.

Syntax:

$scope.eventFunction = function () {

};

Example:

$scope.buttonPress = function () {
  $scope.view.wdg['button-1']['disabled'] = false;  
};

ThingWorx

Data Services

Trigger Data Service

You're able to trigger all added External Data Services

Syntax:

twx.app.fn.triggerDataService(thingName, dataServiceName, inputData)

Example:

twx.app.fn.triggerDataService("Raspberry-Pi", "setName", {'name':'Model B+'});

Listen on Data Service Events

You're able to listen on the Events of Data Services. Available are serviceInvokeComplete and serviceFailure

Syntax:

$scope.$on('dataServiceName.serviceInvokeComplete', function(evt, arg) {

});

Example:

$scope.$on('WindchillPartQueryJSON.serviceInvokeComplete', function(evt, arg) {
  let data = twx.app.mdl["Extractor"].svc["WindchillPartQueryJSON"].data;
  $scope.view.wdg['label-1'].text = data.parts;
});

Should still be added: Where do I find the 3dcontainerName.js?

$scope.$on('newStep', function(evt, arg) { // $scope.setWidgetProp( "Label-1", "text", arg);
console.log(evt); });

$scope, $element, $attrs, $injector, $sce, $timeout, $http, $ionicPopup, and $ionicPopover

CSS 101

Icons

You can add the icons to your labels and buttons by writing icon-name icon in the Class property of your 2D item, as seen in the example above.

You can use most icons from the Ionic Framework (V1) which gives you a large variety of icons.

testing.

F12 for testing, finding out different preset information. Change on the fly, and when satisfied, copy info to Studio.

Image Target

Image Target

The image target allows you to use an image as the tracking method of the AR experience. This means that all 3D widgets in the scene are relative to the position of the target.

Official Image Target Documentation | Optimizing Target Detection and Tracking Stability

Properties

Image Target Properties

Property Type Name Description
url string Image Path to the image being used as the image target. (Not changeable during runtime!)
width number Marker Width The width of the image target.
istracked number Tracked Is true when the camera has recognized the image target.
trackingIndicator boolean Display Tracking Indicator If true, it shows a green tracking outline of the marker when tracking.
stationary* boolean Stationary Comes from underlying Vuforia SDK/Engine. Targets are always in a Tracker Element. A Tracker is like a unique coordinate system. Stationary true means the Target is fixed in the coordinate system false that it is dynamically in the coordinate system and could be moved with the related widgets.

*Only available in 3D Eyewear Experiences

Widget Properties

Property Type Name Description
x number X The X coordinate.
y number Y The Y coordinate.
z number Z The Z coordinate.
rx number X The X rotation.
ry number Y The Y rotation.
rz number Z The Z rotation.

Events

Event Name Description
trackingacquired Tracking Acquired Fired when the image is recognized by the camera.
trackinglost Tracking Lost Fired when the camera no longer recognizes the image.

Model Target

Model Target

The model target allows you to use a real-life object (Let it be a toy car, a machine in a factory or your newly bought BMW) as the tracking method of the AR experience. This means that all 3D widgets in the scene are relative to the position of the target.

Official Model Target Documentation | Supported Objects & CAD Model Best Practices

Properties

Image Target Properties

Property Type Name Description
istracked boolean Tracked Is true when the camera has recognized the real-life object as the model target.

Widget Properties

Property Type Name Description
x number X The X coordinate.
y number Y The Y coordinate.
z number Z The Z coordinate.
rx number X The X rotation.
ry number Y The Y rotation.
rz number Z The Z rotation.

Events

Event Name Description
trackingacquired Tracking Acquired Fired when the object is recognized by the camera.
trackinglost Tracking Lost Fired when the camera no longer recognizes the object.

Spatial Target

Spatial Target

The spatial target allows you to not use any marker as the tracking method of the AR experience. All 3D widgets in the scene are relative to the initial position of the target. The user is able to pan, rotate and scale the initial position with gestures.

Official Spatial Target Documentation | Supported Devices

Properties

Spatial Target Properties

Property Type Name Description
istracked boolean Tracked Is true when the camera has recognized the image target.
enablescalegesture boolean Enable Scale Gesture Enables the scale gesture. This changes the size of the scene.
enabletranslategesture boolean Enable Pan Gesture Enables the pan gesture. This allows the user to move the scene around.
enablerotategesture boolean Enable Rotate Gesture Enables the rotate gesture. With two fingers, the user can rotate the scene.

Widget Properties

Property Type Name Description
x number X The X coordinate.
y number Y The Y coordinate.

Services

Service Name Description
resetGesture Reset Gesture Changes Calling this service resets the spatial target to it's default settings.

Events

Event Name Description
trackingacquired Tracking Acquired Fired when the image is recognized by the camera.
trackinglost Tracking Lost Fired when the camera no longer recognizes the image.

ThingMark

ThingMark

A ThingMark functions similar to an image target, but also is a uniquely identifiable market that is universally recognizable by the Vuforia View app. It's used as a tracking method of the AR experience. This means that all 3D widgets in the scene are relative to the position of the target.

Official ThingMark Documentation

Properties

ThingMark Properties

Property Type Name Description
markerId string ThingMark This is the ThingMark ID.
width number Marker Width This is the width of the marker.
trackingIndicator boolean Display Tracking Indicator If true, it shows a green tracking outline of the marker when tracking.
istracked boolean Tracked Is true when the camera has recognized the ThingMark.
stationary* boolean Stationary Comes from underlying Vuforia SDK/Engine. Targets are always in a Tracker Element. A Tracker is like a unique coordinate system. Stationary true means the Target is fixed in the coordinate system false that it is dynamically in the coordinate system and could be moved with the related widgets.

*Only available in 3D Eyewear Experiences

Widget Properties

Property Type Name Description
x number X The X coordinate.
y number Y The Y coordinate.
z number Z The Z coordinate.
rx number X The X rotation.
ry number Y The Y rotation.
rz number Z The Z rotation.

Events

Event Name Description
trackingacquired Tracking Acquired Fired when the object is recognized by the camera.
trackinglost Tracking Lost Fired when the camera no longer recognizes the object.

3D Button

3D Button Widget

Note: Only available in 3D Eyewear experiences.

The 3D button acts as a button in the 3D environment.

Official 3D Button Documentation

Properties

Button Properties

Property Type Name Description
text string Text Change the text of the label.
src string Resource Path to the image. This replaces the text.
height number Height Change the button height in Meters.
width number Width Change the button width in Meters
fontColor string Font Color Changes the text color. Change the color by rgb(255,255,255); or rgba(255,255,255, 1); or #FFFFFF.
buttonColor string Button Color Changes the button color. Change the color by rgb(255,255,255); or rgba(255,255,255, 1); or #FFFFFF.

Widget Properties

Property Type Name Description
x number X The X coordinate.
y number Y The Y coordinate.
z number Z The Z coordinate.
rx number X The X rotation.
ry number Y The Y rotation.
rz number Z The Z rotation.
visible boolean Visible Changes the visibility depending on the given value.

Events

Event Name Description
click Click Fired when the user interacts with the button by clicking/touching on it.

3D Gauge

3D Gauge Widget

The gauge allows you to visualize a value as a gauge in the 3D environment.

Official 3D Gauge Widget Documentation

Properties

3D Gauge Properties

Property Type Name Description
src string Resource Path to the background gauge icon. There are different presets in Studio to choose from.
font string Font Name of the font you want to use. Because Studio creates a HTML5 canvas you need to use a custom font in the experience before to let them work. To import custom font see CSS-101
fontsize string Font Size Size of the font used on the canvas/image of the gauge
textattrs string Text Attributes Here you can add text color(fill), stroke/outline color(stroke), decoration and CSS(svg) properties
enableStateFormatting boolean Enable State-Based Formatting If enabled you could use style definitions of Thingworx. This needs a property of the 3D Gauge itself which become the value like 50°C. (default the text property) and a State Definition defined in Thingworx, like predefined one "SimpleAlarm"
stateFormatValue string Dependent Field Own widget property which becomes the value to result in a style change (default text)
stateFormat boolean State Definition Select here the State Definition defined in Thingworx. This will change default Gauge SVG colors
  • Background Color -> Gauge Background
  • Foreground -> Gauge Icon and Text color
  • Line Color -> Text stroke color
textx number X coord of Text w/r/t Canvas The value same like pixel where on the on the X axis of canvas (starting on top left side) the text should be placed
texty number Y coord of Text w/r/t Canvas The value same like pixel where on the on the Y axis of canvas (starting on top left side) the text should be placed
imagex number X coord of Image w/r/t Canvas The value same like pixel where on the on the X axis of canvas (starting on top left side) the resource image should be placed
imagey number Y coord of Image w/r/t Canvas The value same like pixel where on the on the Y axis of canvas (starting on top left side) the resource image should be placed
canvasgrowthoverride string Canvas Growth Override This value will set or override the property canvasheight and canvaswidth depends on the four input parameter.
  • image+text (depends if image or text changing during runtime the bigger value will override the canvas height or width)
  • text (change the size of the canvas only if text gets bigger/smaller)
  • image (change the size of the canvas only if image gets bigger/smaller
  • canvas (use the the size defined by properties canvasheight and canvaswidth
canvasheight number Canvas Height Defines the height of the HTML5 canvas used by 3D Gauge (only used if canvasgrowthoverride is set to canvas
canvaswidth number Canvas Width Defines the width of the HTML5 canvas used by 3D Gauge (only used if canvasgrowthoverride is set to canvas
height number Height Beside scale there is a value for the height in meter for how big the 3D widget is. (keep in mind this value is manipulated by the scale property)
width number Width Beside scale there is a value for the width in meter for how big the 3D widget is. (keep in mind this value is manipulated by the scale property)

Widget Properties

Property Type Name Description
x number X The X coordinate.
y number Y The Y coordinate.
z number Z The Z coordinate.
rx number X The X rotation.
ry number Y The Y rotation.
rz number Z The Z rotation.
scale string Scale The scale of the 3D widget. Changing this makes the object bigger, or smaller.
visible boolean Visible Changes the visibility depending on the given value.
occlude boolean Occluding Makes all widgets behind this widget area transparent.
decal boolean Always On Top Changes the rendering of this widget so that it is always on top, or not depending on the given value.
opacity number Opacity Changes the transparency of the widget.

Events

Event Name Description
click Click Fired when the user interacts with the gauge by clicking/touching on it.

3D Image

3D Image Widget

The image widget allows you to visualize an image in the 3D environment.

Official 3D Image Widget Documentation | Supported File Formats

Properties

3D Image Properties

Property Type Name Description
src string Resource Path to the background gauge icon. There are different presets in Studio to choose from.
class string Class Sets the CSS class of the text.
height number Height Beside scale there is a value for the height in meter for how big the 3D widget is. (keep in mind this value is manipulated by the scale property)
width number Width Beside scale there is a value for the width in meter for how big the 3D widget is. (keep in mind this value is manipulated by the scale property)
billboard boolean Billboard If true, the widget will always face the camera.
pivot number Pivot Sets the rotation point of the billboarding. A number between 1-9 starting from Top Left 1 and ends by Bottom Right 9. (It's not changeable during runtime)

Widget Properties

Property Type Name Description
x number X The X coordinate.
y number Y The Y coordinate.
z number Z The Z coordinate.
rx number X The X rotation.
ry number Y The Y rotation.
rz number Z The Z rotation.
scale string Scale The scale of the 3D widget. Changing this makes the object bigger, or smaller.
visible boolean Visible Changes the visibility depending on the given value.
occlude boolean Occluding Makes all widgets behind this widget area transparent.
decal boolean Always On Top Changes the rendering of this widget so that it is always on top, or not depending on the given value.
opacity number Opacity Changes the transparency of the widget.

Events

Event Name Description
click Click Fired when the user interacts with the gauge by clicking/touching on it.

CSS

Property Description
background-color Sets the (background) color of the 3D image widget.
border-color Sets the border color around the 3D image widget.
border-radius Sets the border radius around the 3D image widget.
border-style Sets the border style around the 3D image widget.
border-width Sets the border width around the 3D image widget.
border Combines all border settings.
padding Applies padding outside of the image.

3D Label

3D Label Widget

The 3D label widget allows you to place text in the 3D environment.

Official 3D Label Documentation

Properties

Label Properties

Property Type Name Description
text string Text Change the text of the label widget.
fontFamily string Font Family Sets the font. Fonts are dependent on the device.
fontColor string Font Color Changes the text color. Change the color by rgb(255,255,255); or rgba(255,255,255, 1); or #FFFFFF.
fontOutlineColor string Outline Color Changes the outline of the text. Change the color by rgb(255,255,255); or rgba(255,255,255, 1); or #FFFFFF.
class string Class Sets the CSS class of the text.
height number Height Beside scale there is a value for the height in meter for how big the 3D widget is. (keep in mind this value is manipulated by the scale property)
width number Width Beside scale there is a value for the width in meter for how big the 3D widget is. (keep in mind this value is manipulated by the scale property)
billboard boolean Billboard If true, the widget will always face the camera.
pivot number Pivot Sets the rotation point of the billboarding. A number between 1-9 starting from Top Left 1 and ends by Bottom Right 9. (It's not changeable during runtime)

Widget Properties

Property Type Name Description
x number X The X coordinate.
y number Y The Y coordinate.
z number Z The Z coordinate.
rx number X The X rotation.
ry number Y The Y rotation.
rz number Z The Z rotation.
scale string Scale The scale of the 3D widget. Changing this makes the object bigger, or smaller.
visible boolean Visible Changes the visibility depending on the given value.
occlude boolean Occluding Makes all widgets behind this widget area transparent.
decal boolean Always On Top Changes the rendering of this widget so that it is always on top, or not depending on the given value.
opacity number Opacity Changes the transparency of the widget.

Events

Event Name Description
click Click Fired when the user interacts with the label by clicking/touching on it.

CSS

Property Description
font-family Sets the font family.
color Sets the font color.
--text-stroke-color Sets the stroke color of the font.
--text-stroke-width Sets the width of the stroke (border) around the font.
font-weight Sets the thickness of the font.
font-style Changes the style of the font. (Normal, Bold, Italic, etc.)
background-color Sets the (background) color of the 3D label widget.
text-decoration Supports underlining of the text.
border-color Sets the border color around the 3D label widget.
border-radius Sets the border radius around the 3D label widget.
border-style Sets the border style around the 3D label widget.
border-width Sets the border width around the 3D label widget.
border Combines all border settings.
padding Applies padding outside of the text.

Model

Model Widget

The model widget allows you to add 3D models to your experiences.

Official Model Widget Documentation | Supported 3D Model Formats

Properties

Model Properties

Property Type Name Description
src string Resource Path to the model which is displayed via the model widget.
sequence string Sequence Path to the animation sequence which is played via the model widget.
currentStep number Current Step The current step of the animation sequence.
steps number Steps Total step count of the animation sequence.
playing boolean Playing Is true when the animation sequence is playing.
(If not, it's undefined)

Widget Properties

Property Type Name Description
x number X The X coordinate.
y number Y The Y coordinate.
z number Z The Z coordinate.
rx number X The X rotation.
ry number Y The Y rotation.
rz number Z The Z rotation.
scale string Scale The scale of the 3D widget. Changing this makes the object bigger, or smaller.
visible boolean Visible Changes the visibility depending on the given value.
occlude boolean Occluding Makes all widgets behind this widget area transparent.
decal boolean Always On Top Changes the rendering of this widget so that it is always on top, or not depending on the given value.
opacity number Opacity Changes the transparency of the widget.

Services

Service Name Description
forward Forward Calling this service jumps to the next step of the animation sequence.
play Play Triggers the current step of the animation sequence.
playAll PlayAll Plays all steps of the animation sequence without stopping.
reset Reset Resets all models in the view to the first step.
rewind Rewind Sets the current step to the previous one.
stop Stop This interrupts the current playing step of the animation sequence.

Events

Event Name Description
playstarted Play Started Fired when 'Play' or 'Play All' is fired as a service.
playstopped Play Stopped Fired when the 'Play', 'Play All' or 'Stop' services are fired.
modelLoaded Model Loaded Fired when a model is fully loaded.
click Click Fired when the user interacts with the model by clicking/touching on it.

Model Item

Model Item Widget

The model item allows you to divide a model in different parts, depending on the model structure. With this you can change the color of only one part, instead of the whole model.

Official Model Item Widget Documentation

Properties

Model Item Properties

Property Type Name Description
model string Model ID Path to the model which the item depends on.
idpath string Component Occurrence This is the index structure of the model item.
color string Color Current color of the model item. Change the color by rgb(255,255,255); or rgba(255,255,255, 1); or #FFFFFF.

Widget Properties

Property Type Name Description
x number X The X coordinate.
y number Y The Y coordinate.
z number Z The Z coordinate.
rx number X The X rotation.
ry number Y The Y rotation.
rz number Z The Z rotation.
scale string Scale The scale of the 3D widget. Changing this makes the object bigger, or smaller.
visible boolean Visible Changes the visibility depending on the given value.
occlude boolean Occluding Makes all widgets behind this widget area transparent.
decal boolean Always On Top Changes the rendering of this widget so that it is always on top, or not depending on the given value.
opacity number Opacity Changes the transparency of the widget.

Events

Event Name Description
click Click Fired when the user interacts with the model item by clicking/touching on it.

Camera

The Camera widget allow you to take screenshots out of the Experience, if you want with or without Augmentations.
Only available in 3D Eyewear Experiences

Official Camera Widget Documentation

Properties

Camera Properties

Property Type Name Description
isAugmentationsHidden boolean Hide 3D Augmentations When selected, 3D augmentations for the screenshot are hidden.
image string Image Data A base64-encoded string (text) of the resulting JPEG image taken by the camera.
imageUrl string Image URL Wraps the image data above into a hyperlink which can be embedded in a web page, or bound as the Resource of a 3D Image widget.

Services

Service Name Description
takePicture Take Picture Calling this service create a screenshot.

Events

Event Name Description
pictureTaken Picture Taken Triggered when the picture is taken.
userCanceled User Canceled Triggered when a user cancels the camera.

Scan

The Scan widget allows you to scan QR or bar codes in an Experience.

Official Scan Widget Documentation

Properties

Scan Properties

Property Type Name Description
isAugmentationsHidden boolean Hide 3D Augmentations When selected, 3D augmentations for the screenshot are hidden.
scannedValue string Scanned Value When bound to a widget that includes text, this property displays the value of the barcode or QR code. For example, if a barcode on a computer is scanned, the serial number is displayed.

Additional Widget Properties (Mobile)

Property Type Name Description
text string Text The text that is displayed when scan view appears.
class string Class Here you add CSS classes to change the appearance (like class attribute in HTML)

Services

Service Name Description
startScan Start Scan Invoking this service will start the camera to scan for a code.
stopScan* Stop Scan Invoking this service will stop the camera to scan for a code.

*Only available in 3D Eyewear Experiences

Events

Event Name Description
valueacquired Value Acquired Triggered when the scan value is acquired.
usercanceled User Canceled Triggered when a user cancels the scan.

TML Text

TML Text Widget

The TML widget is a multi-functional widget that allows you to add HTML/OpenGL/HLSL(DirectX11) code and even create custom widgets. To keep it short, it is a HTML text box. Everything you wrote into the Text property has to follow the syntax of HTML.

Official TML Text Widget Documentation | TML Shader Tutorial

Examples

Add Widgets/Elements via TML

<button style="" class="button " twx-native-events="">Scan</button>

Add OpenGL/HLSL via TML

<script name="YOURSHADERNAME" type="x-shader/x-fragment">
  <!-- Fragment Shader here-->
</script>

<script name="YOURSHADERNAME" type="x-shader/x-vertex">
  <!-- Vertex Shader here-->
</script>

Add JS via TML

<script>
  var some = "Test";
</script>

Card

Card Widget

The Card allows grouping some 2D widgets in a box with background color. It has also default a scroll property so it's useful for contents which is bigger than the area.

Official Card Widget Documentation

Properties

Card Properties

Property Type Name Description
header string Header Here you could write some headings which gets displayed as a label
Note: you can't see the properties effect during design time, it only takes effect in preview and Vuforia View
footer string Footer Same as the header property define here some text for the footer

Widget Properties

Property Type Name Description
class string Class Same like HTML class attribute to handel CSS classes. If you want to add more than one class split them with a space "button-positive ion-arrow-up-a".
visible boolean Visible Changes the visibility depending on the given value.
padding string Padding Value for example pixel (px) which generates space inside the widget. It's possible to use it like this: 25px 50px 75px 100px for top, right, bottom, left padding.
margin string Margin Value for example pixel (px) which generates space inside the widget. It's possible to use it like this: 25px 50px 75px 100px for top, right, bottom, left margin.

Footer

The footer does what you expect from the name. It will add a box to the bottom of the screen. This widget use some entities from the ionic framework.
Note: If you place this widget in the experience it is no longer possible to hide the Navigation Menu

Official Footer Widget Documentation

Properties

Widget Properties

Property Type Name Description
class string Class Same like HTML class attribute to handel CSS classes. If you want to add more than one class split them with a space "button-positive ion-arrow-up-a"

Grid Layout

Grid Layout Widget

The Grid Layout helps to align and justify your content right. The widget based on the flex concept of CSS and provides many functions to help layouting.

Official Gird Layout Widget Documentation

Properties

Grid Layout Properties

Property Type Name Description
evenlyspacedrows boolean Rows Divide Available Height Evenly Dependent on the height of the Grid Layout (if you set one via css) all Row widgets inside the Grid gets the same height (for best results don't set the rowheight property of the Row widget).

Widget Properties

Property Type Name Description
class string Class Same like HTML class attribute to handel CSS classes. If you want to add more than one class split them with a space "button-positive ion-arrow-up-a".
visible boolean Visible Changes the visibility depending on the given value.
margin string Margin Value for example pixel (px) which generates space around the widget. It's possible to use it like this: 25px 50px 75px 100px for top, right, bottom, left margin.

Grid Actions

Action Name Description
Add Row Adds a Row widget to the Gird Layout and place it in bottom of the last one.



Row Widget

The row widget is a sub widget of the Grid Layout and only creatable with Grid Actions.
Note: It is not direct possible to change properties dynamically via JS because they get a random studio ID

Properties

Row Properties

Property Type Name Description
rowclass string Class Same like HTML class attribute to handel CSS classes. If you want to add more than one class split them with a space "button-positive ion-arrow-up-a".
rowheight string Row Height This property sets the HTML elements height attribute and allows you to set a fixed height to the specific row.

Grid Actions

Action Name Description
Add Column Adds a Column widget to the Row widget by default the columns dividing the row evenly.
Add Row Adds a Row widget to the Gird Layout and place it in bottom of the last one.



Column Widget

The column widget is a sub widget of the Grid Layout and only creatable with Grid Actions of a Row or Column itself
Note: It is not direct possible to change properties dynamically via JS because they get a random studio ID

Properties

Column Properties

Property Type Name Description
fixedcolsize string Fixed Column Size This property sets the HTML elements width attribute and allows you to set a fixed width to the specific column.
Note: This is not perfect visible in design time!

Widget Properties

Property Type Name Description
class string Class Same like HTML class attribute to handel CSS classes. If you want to add more than one class split them with a space "button-positive ion-arrow-up-a".
padding string Padding Value for example pixel (px) which generates space inside the widget. It's possible to use it like this: 25px 50px 75px 100px for top, right, bottom, left padding.
flexdirection string Flex Direction Same like the flex-direction property in css. Defines if widgets placed into this widget layout like in a row or column. (see here for more information)
justification string Justification Depending of what is set in felxdirection property, it changes the position of included widgets (row = horizontally / column = vertical).
  • flex-start
  • flex-end
  • center
  • space-between widgets align to the borders
  • space-around widgets align evenly with same space between there center points
alignment string Alignment Depending of what is set in felxdirection property, it changes the position of included widgets (row = vertical / column = horizontal).
  • flex-start
  • flex-end
  • center
  • stretch included widgets with a width or height property set to auto or 100% will stretched to full width/height of the Column
  • baseline set it to the top of the Row or left of the Column
wrap string Content Wrap This property defines, if widgets inside the box are dependent of the box size. It's also dependent of what is set in in felxdirection property. To get a better understanding see here for more information.
  • wrap
  • no-wrap

Grid Actions

Action Name Description
Add Column Adds a Column widget to the Row widget by default the columns dividing the row evenly.

Header

Header Widget

The header does what you expect from the name. It will add a box to the top of the screen divided into three sections. This widget use some entities from the ionic framework and add it's content direct to the Navigation Menu.
Note: If you place this widget in the experience it is no longer possible to hide the Navigation Menu

Official Header Widget Documentation

Properties

Header Properties

-

Widget Properties

-



Header Title Properties

-

Widget Properties

Property Type Name Description
class string Class Same like HTML class attribute to handel CSS classes. If you want to add more than one class split them with a space "button-positive ion-arrow-up-a".
visible boolean Visible Changes the visibility depending on the given value.



Header Button Properties

Property Type Name Description
align string Alignment Select here if the content in this box is left(primary) or right(secondary) aligned to the Header Title.
  • primary
  • secondary

Widget Properties

Property Type Name Description
class string Class Same like HTML class attribute to handel CSS classes. If you want to add more than one class split them with a space "button-positive ion-arrow-up-a".
visible boolean Visible Changes the visibility depending on the given value.

Panel

Panel Widget

This widget combine the card and column widget and have different properties as the default created panels by the 2D-Body. It has the default scroll overflow and allows you to place content which is larger than the area.

Official Panel Widget Documentation

Properties

Widget Properties

Property Type Name Description
height string Height This property sets the HTML elements style attribute and allows you to set a fixed height in units like px, %, vw, vh etc.
width string Width This property sets the HTML elements style attribute and allows you to set a fixed width in units like px, %, vw, vh etc.
class string Class Same like HTML class attribute to handel CSS classes. If you want to add more than one class split them with a space "button-positive ion-arrow-up-a".
visible boolean Visible Changes the visibility depending on the given value.
padding string Padding Value for example pixel (px) which generates space inside the widget. It's possible to use it like this: 25px 50px 75px 100px for top, right, bottom, left padding.
flexdirection string Flex Direction Same like the flex-direction property in css. Defines if widgets placed into this widget layout like in a row or column. (see here for more information)
justification string Justification Depending of what is set in felxdirection property, it changes the position of included widgets (row = horizontally / column = vertical).
  • flex-start
  • flex-end
  • center
  • space-between widgets align to the borders
  • space-around widgets align evenly with same space between there center points
alignment string Alignment Depending of what is set in felxdirection property, it changes the position of included widgets (row = vertical / column = horizontal).
  • flex-start
  • flex-end
  • center
  • stretch included widgets with a width or height property set to auto or 100% will stretched to full width/height of the Column
  • baseline set it to the top of the Row or left of the Column
wrap string Content Wrap This property defines, if widgets inside the box are dependent of the box size. It's also dependent of what is set in in felxdirection property. To get a better understanding see here for more information.
  • wrap
  • nowrap

Popup

The Popup is a wonderful container which allow us to group widgets and create an area in front of all other elements. One of the most useful features is the hide in design time. Which makes it easier to keep a big experience organized.

Official Popup Widget Documentation

Properties

Property Type Name Description
centered boolean Centered If true the popup container is centered to the horizontal and vertical center depend of the screen. It adds following css:
top: 50%; left: 50%; transform: translate(-50%, -50%);
If false it adds the property top, bottom, left and right
type string Type Sets if content behind the popup should be selectable (floating) or blured and not selectable (modal) values are:
  • floatingpopup
  • modal

Popup Properties (centered is false)

Property Type Name Description
top string Top This property sets the HTML elements style attribute and allows you to set a fixed top in units like px, %, vw, vh etc.
bottom string Bottom This property sets the HTML elements style attribute and allows you to set a fixed bottom in units like px, %, vw, vh etc.
left string Left This property sets the HTML elements style attribute and allows you to set a fixed left in units like px, %, vw, vh etc.
right string Right This property sets the HTML elements style attribute and allows you to set a fixed right in units like px, %, vw, vh etc.

Widget Properties

Property Type Name Description
height string Height This property sets the HTML elements style attribute and allows you to set a fixed height in units like px, %, vw, vh etc.
width string Width This property sets the HTML elements style attribute and allows you to set a fixed width in units like px, %, vw, vh etc.
class string Class Same like HTML class attribute to handel CSS classes. If you want to add more than one class split them with a space "button-positive ion-arrow-up-a".
visible boolean Visible Changes the visibility depending on the given value.
padding string Padding Value for example pixel (px) which generates space inside the widget. It's possible to use it like this: 25px 50px 75px 100px for top, right, bottom, left padding.

Services

Service Name Description
hidepopup Hide Popup The service sets the visible property of the popup to false.
showpopup Show Popup The service sets the visible property of the popup to true.

Repeater

Repeater Widget

The Repeater is a powerful widget to display dynamic content. It provides together with a Gird Layout the possibility to create own customized tables. So you can repeat every widget in the table you want. The only thing you need is an Infotable property on a Thing in Thingworx and an assigned Datashape.

Use a JSON Array instead of an Infotable Tutorial

Official Repeater Widget Documentation

Properties

Repeater Properties

Property Type Name Description
repeatercontentclass string Repeater Cell Class Same like HTML class attribute to handel CSS classes. If you want to add more than one class split them with a space "button-positive ion-arrow-up-a".
repeatercontentwidth string Repeater Cell Width This property sets the HTML elements style attribute and allows you to set a fixed width in units like px, %, vw, vh etc.
repeatercontentheight string Repeater Cell Height This property sets the HTML elements style attribute and allows you to set a fixed height in units like px, %, vw, vh etc.
repeatercontentpadding string Repeater Cell Padding Value for example pixel (px) which generates space inside the widget. It's possible to use it like this: 25px 50px 75px 100px for top, right, bottom, left padding.
repeatercontentmargin string Cell Margin Value for example pixel (px) which generates space around the widget. It's possible to use it like this: 25px 50px 75px 100px for top, right, bottom, left margin.
selection boolean Selection Sets if a row or an entry is selectable or not (this is related to the current selected row bindings of a service)
multiselect boolean Multi-Select Sets if more than one row or an entry is selectable at the same time (this is related to the current selected row bindings of a service and only visible if selection is set to true)

Widget Properties

Property Type Name Description
class string Class Same like HTML class attribute to handel CSS classes. If you want to add more than one class split them with a space "button-positive ion-arrow-up-a".
Data infotable Data It is the property which handles lists or more structured JSONs so called Infotables. This information coming from Thingworx Service with Infotable Output.
width string Width This property sets the HTML elements style attribute and allows you to set a fixed width in units like px, %, vw, vh etc.
visible boolean Visible Changes the visibility depending on the given value.
flexdirection string Flex Direction Same like the flex-direction property in css. Defines if widgets placed into this widget layout like in a row, column, row-reversed or column-reversed. (see here for more information)
justification string Justification Depending of what is set in felxdirection property, it changes the position of included widgets (row = horizontally / column = vertical).
  • flex-start
  • flex-end
  • center
  • space-between widgets align to the borders
  • space-around widgets align evenly with same space between there center points
alignment string Alignment Depending of what is set in felxdirection property, it changes the position of included widgets (row = vertical / column = horizontal).
  • flex-start
  • flex-end
  • center
  • stretch included widgets with a width or height property set to auto or 100% will stretched to full width/height of the Column
  • baseline set it to the top of the Row or left of the Column
wrap string Content Wrap This property defines, if widgets inside the box are dependent of the box size. It's also dependent of what is set in in felxdirection property. To get a better understanding see here for more information.
  • wrap
  • nowrap

Events

Event Name Description
itemclick Item Click Fired when the user interacts with a row or entry of the repeater by clicking/touching on it.

Tabs

Tabs Widget

The Tabs Widget helps if you need multiple containers with many content to clean up your interface and pre sort configurations. It helps also with limited space.

Official Tabs Widget Documentation

Properties

Tabs Properties

Property Type Name Description
taborientation string Tab Orientation Sets if the Tab content is aligned to the right or bottom of the tab button.
tabpadding string Tab Padding Value for example pixel (px) which generates space inside the widget. It's possible to use it like this: 25px 50px 75px 100px for top, right, bottom, left padding.
stripclass string Tab Strip Class Same like HTML class attribute to handel CSS classes. If you want to add more than one class split them with a space "button-positive ion-arrow-up-a".

Widget Properties

Property Type Name Description
class string Class Same like HTML class attribute to handel CSS classes. If you want to add more than one class split them with a space "button-positive ion-arrow-up-a".
visible boolean Visible Changes the visibility depending on the given value.
margin string Margin Value for example pixel (px) which generates space around the widget. It's possible to use it like this: 25px 50px 75px 100px for top, right, bottom, left margin.

Tab Actions

Action Name Description
Add Tab Adds a Tab widget to the Tabs and place it in bottom of the last one.

Events

Event Name Description
clicktab Tab Click Same like the click event of a normal button.



Tab Widget

The Tab widget is a sub widget of the Tabs and only creatable with Tab Actions.
Note: It is not direct possible to change properties dynamically via JS because they don't get a studio ID

Properties

Tab Properties

Property Type Name Description
title string Title This is the name/label shown on the specific tab.

Widget Properties

Property Type Name Description
class string Class Same like HTML class attribute to handel CSS classes. If you want to add more than one class split them with a space "button-positive ion-arrow-up-a".
padding string Padding Value for example pixel (px) which generates space inside the widget. It's possible to use it like this: 25px 50px 75px 100px for top, right, bottom, left padding.

Tab Actions

Action Name Description
Add Tab Adds a Tab widget to the Tabs and place it in bottom of the last one.

Button

Button Widget

The button is a simple HTML button and can fire click events to trigger services on other widgets or external data. You could also use Ionicon classes on buttons to use Icons instead of just text. See Class property for an example.

Official Button Documentation

Properties

Button Properties

Property Type Name Description
disabled boolean Disabled Dependent on the value the widget is selectable or not. This property adds a CSS class
.button[disabled] {
 opacity: .4;
 cursor: default !important;
 pointer-events: none;
}

Widget Properties

Property Type Name Description
text string Text Change the text of the label.
class string Class Same like HTML class attribute to handel CSS classes. If you want to add more than one class split them with a space "button-positive ion-arrow-up-a".
visible boolean Visible Changes the visibility depending on the given value.
margin string Margin Value for example pixel (px) which generates space around the widget. It's possible to use it like this: 25px 50px 75px 100px for top, right, bottom, left margin.

Events

Event Name Description
click Click Fired when the user interacts with the button by clicking/touching on it.

Scan

The Scan widget allows you to scan QR or bar codes in an Experience.

Official Scan Widget Documentation

Properties

Scan Properties

Property Type Name Description
isAugmentationsHidden boolean Hide 3D Augmentations When selected, 3D augmentations for the screenshot are hidden.
scannedValue string Scanned Value When bound to a widget that includes text, this property displays the value of the barcode or QR code. For example, if a barcode on a computer is scanned, the serial number is displayed.

Additional Widget Properties (Mobile)

Property Type Name Description
text string Text The text that is displayed when scan view appears.
class string Class Here you add CSS classes to change the appearance (like class attribute in HTML)

Services

Service Name Description
startScan Start Scan Invoking this service will start the camera to scan for a code.
stopScan* Stop Scan Invoking this service will stop the camera to scan for a code.

*Only available in 3D Eyewear Experiences

Events

Event Name Description
valueacquired Value Acquired Triggered when the scan value is acquired.
usercanceled User Canceled Triggered when a user cancels the scan.

Retrieve Rest Data

This small article shows you how to retrieve rest data via the XMLHttpRequest object. Despite it's name, it can be used to retrieve any type of data, not only XML.

Example

Retrieves all timezones inside of Europe on start of the experience.

$scope.$on("$ionicView.afterEnter", function (event) {
  let xhr = new XMLHttpRequest();

  xhr.open('GET', 'http://worldtimeapi.org/api/timezone/Europe');
  xhr.withCredentials = false;  

  xhr.send();

  xhr.onload = function() {
    if (xhr.status != 200) { // analyze HTTP status of the response
      $scope.view.wdg['resultText'].text = xhr.status + " " + xhr.statusText;
    } 
    else { // show the result
      $scope.view.wdg['resultText'].text = xhr.response;
    }
  };
});

Explanation

We first create subscribe to the $ionicView.afterEnter event which gets fired after the experience finished loading.

$scope.$on("$ionicView.afterEnter", function (event) {...

Afterwards we create a new XMLHttpRequest object.

  let xhr = new XMLHttpRequest();

Then we open the link and add additional credentials if needed and send the request.

  xhr.open('GET', 'http://worldtimeapi.org/api/timezone/Europe');
  xhr.withCredentials = false;  

  xhr.send();

Once sent we can listen to the onload function. Once it's ready we should check if the HTTP response status is successful. We can put our logic into that, in this case, setting a text with the response.

  xhr.onload = function() {
    if (xhr.status != 200) 
    { 
      //setting the text to the status, if it's not successful.
      $scope.view.wdg['resultText'].text = xhr.status + " " + xhr.statusText;
    } 
    else { 
      //setting the text to the successful response.
      $scope.view.wdg['resultText'].text = xhr.response;
    }
  };

Moving On

Here are a few more resources that will come in handy trying to retrieve data from a URL: